import React, { useEffect, useState } from 'react'
import styles from './index.module.css'
import { LeftOutline } from 'antd-mobile-icons'
import http from '../../utils/http'
import dayjs from 'dayjs'
import { NavBar, Button, Tag } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Index() {
    const navigate = useNavigate()
    const [list, setList] = useState([])
    const [page, setPage] = useState(1)
    const [start] = useState('北京')
    const [end] = useState('广州')
    const [date] = useState(dayjs().format('YYYY-MM-DD'))
    const getList = async () => {
        const res = await http.post('/api/trip/train', {
            start,
            end,
            date,
            page
        })
        console.log(res);
        const { code, data } = res.data
        if (code === 200) {
            setList([...list, ...data])
            setPage((prev) => prev + 1)
        }
    }
    useEffect(() => {
        getList()
    }, [start,end,date,page])

    const handleDetail = (id) => {
        navigate(`/detail/${id}`)
    }
    return (
        <div>
            <div className={styles.top_wroe}>
                <div> <NavBar backIcon={false} back={<div style={{ color: '#Fff' }}><LeftOutline />{start} - {end}</div>} /> </div>
                <div className={styles.date_wroe}>
                    <Button
                        size='middle'
                        style={{
                            '--text-color': '#fff',
                            '--background-color': 'rgb(5, 5, 108)',
                            '--border-style': 'none'
                        }}
                    >
                        前一天
                    </Button>
                    <span className={styles.date}>
                        {date}
                    </span>
                    <Button
                        size='middle'
                        style={{
                            '--text-color': '#fff',
                            '--background-color': 'rgb(5, 5, 108)',
                            '--border-style': 'none'
                        }}
                    >
                        后一天
                    </Button>
                </div>
            </div>
            <div>
                {
                    list?.map((item, ind) => (
                        <div
                            key={ind}
                            onClick={() => handleDetail(item.id)}
                            className={styles.data_wroe}
                        >
                            <div className={styles.left_wroe}>
                                <span>{item.start}</span>
                                <span>{item.startTime}</span>
                                <span>{item.end}</span>
                                <span>{item.isSeat ? <Tag color='warning'>有票</Tag> : <Tag color='danger'>无票</Tag>}</span>
                                <span>{item.isSpeed ? <Tag color='primary'>高铁</Tag> : <Tag color='success'>火车</Tag>}</span>
                                <span>5张</span>
                            </div>
                            <div className={styles.right_wroe}>
                                <span>￥{item.tick?.secondTick}</span>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

export default Index
